<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row :gutter="20" type="flex" justify="start">
        <el-col :span="3"><el-input v-model="searchParams.tableName" placeholder="表名"></el-input></el-col>
        <el-col :span="3"><el-input></el-input></el-col>
        <el-col :span="3"><el-input></el-input></el-col>
        <el-col :span="3"><el-input></el-input></el-col>
        <el-col :span="3"><el-input></el-input></el-col>
        <el-col :span="3"><el-button @click="initData" type="primary">查询</el-button></el-col>
      </el-row>
      <el-row :gutter="20" type="flex" justify="start">
        <el-col :span="6"><el-button type="primary">生成代码</el-button></el-col>
      </el-row>
    </div>
    <el-table :data="list"
              v-loading="listLoading"
              element-loading-text="Loading"
              border
              fit
              size="mini"
              highlight-current-row max-height="450"
              style="width: 100%;"
              :default-sort = "{prop: 'tableName', order: 'desc'}"
              @sort-change="handleSortChange">
      <el-table-column
        type="selection"
        width="43">
      </el-table-column>
      <el-table-column align="center" label='ID'>
        <template slot-scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column label="tableName" prop="tableName" sortable="custom" align="center">
        <template slot-scope="scope">
          {{scope.row.tableName}}
        </template>
      </el-table-column>
      <el-table-column label="engine" prop="engine" sortable="custom"  align="center">
        <template slot-scope="scope">
          {{scope.row.engine}}
        </template>
      </el-table-column>
      <el-table-column label="createTime" prop="createTime" sortable="custom" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="tableComment" align="center">
        <template slot-scope="scope">
          {{scope.row.tableComment}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        :current-page="searchParams.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="searchParams.limit"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import { page } from '@/api/generator'
export default {
  name: 'generator',
  data() {
    return {
      list: null,
      listLoading: true,
      searchParams: {
        page: 1,
        limit: 10
      },
      total: null
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.listLoading = true
      page(this.searchParams).then(res => {
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleSortChange(val) {
      console.log(val)
      this.searchParams.sort = val.prop
      if (val.order === 'ascending') {
        this.searchParams.order = 'asc'
      } else {
        this.searchParams.order = 'desc'
      }
      this.initData()
    },
    handleSizeChange(val) {
      this.searchParams.limit = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.initData()
    }
  }
}
</script>
<style lang="scss" scoped>
.filter-container>div{
  margin: 10px 0px;
}
</style>


